<template>
	<view
		class="upper flex align-items_center"
		:style="{ paddingTop: mgTop, 'line-height': lineHeight, height: upperHeight }">
		<image mode="aspectFill" class="upper-log" src="https://aph.junhecms.com/image/log.png" />
		<text class="upper-title">数字产品中心</text>
		<image mode="aspectFill" class="upper-search" src="https://aph.junhecms.com/image/search.png" @click="search" />
	</view>
</template>

<script setup>
import { getUpperHeight } from '@/utils/tool';

const mgTop = getUpperHeight().mgTop + 'px';
const lineHeight = getUpperHeight().linHeight + 'px';
const upperHeight = getUpperHeight().linHeight + 12 + 'px';

const search = () => {
	uni.navigateTo({
		url: '/homePage/search/index'
	});
};
</script>

<style scoped lang="scss">
.upper {
	background: #fff;
	position: sticky;
	top: 0rpx;
	z-index: 99;

	image {
		vertical-align: middle;
	}

	&-log {
		width: 98rpx;
		height: 36.72rpx;
		margin-left: 30rpx;
	}

	&-title {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		margin-left: 16rpx;
	}

	&-search {
		$wd: 44rpx;
		width: $wd;
		height: $wd;
		margin-left: 145rpx;
	}
}
</style>
